<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-02-16 16:53:19
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-27 15:42:46
 * @FilePath: \大宗买卖\ebuy\src\views\Main\Management\Person\PersonInformation\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
  <div class="main">
    <!-- 个人信息 -->
    <el-card class="card block">
      <div slot="header" class="title">
        <span>个人信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="modifyPersonInfoMation">修改</el-button>
      </div>
      <div class="content">
        <el-form label-position="left" :inline="true">
          <el-form-item label="账号">
            <div class="content-item">{{info.account}}</div>
          </el-form-item>
          <el-form-item label="手机号码">
            <div class="content-item">{{info.phone}}</div>
          </el-form-item>
          <el-form-item label="密码">
            <div class="content-item">{{info.account_password}}</div>
          </el-form-item>
        </el-form>
  
        <el-form label-position="left" :inline="true">
          <el-form-item label="身份证号">
            <div class="content-item">{{info.id_card_number}}</div>
          </el-form-item>
          <el-form-item label="姓名">
            <div class="content-item">{{info.name}}</div>
          </el-form-item>
          <el-form-item label="性别">
            <div class="content-item">男</div>
          </el-form-item>
          <el-form-item label="地区">
            <div class="content-item">{{info.area}}</div>
          </el-form-item>
        </el-form>
        <el-form label-position="left" :inline="true" class="image">
          <el-form-item label="头像">
            <img v-lazy="info.self_profile" alt="">
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 收货地址 -->
    <div class="block">
      <el-card class="card">
        <div slot="header" class="title">
          <span>收货地址</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addAddress">新增地址</el-button>
        </div>
        <div>
          <el-table :header-cell-style="{ background: '#f5f7fa' }" :data="list">
            <el-table-column prop="receiver_name" label="收货人" width="100"> </el-table-column>
              <el-table-column prop="" label="地址">
                <template slot-scope="scope">
                  {{scope.row.receiver_area}} {{scope.row.receiver_deatailed_address}}
                </template>
              </el-table-column>
              <el-table-column prop="receiver_phone" label="手机/电话"> </el-table-column>
              <el-table-column label="默认">
                <template slot-scope="scope" v-if="scope.row.is_default_address">
                  {{scope.row.is_default_address}}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button  type="text" size="small" @click="modifyAddress(scope.row.id)">修改</el-button>
                  <span>|</span>
                  <el-button type="text" size="small" @click="deleteAddress(scope.row.id, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { AreaData, AreaCodeToText, AreaTextToCode } from '@/utils/utils'
export default {
  data() {
    return {
       list:[],
       info:{},
    };
  },
  computed:{
    aid(){
      return this.$store.state.user.account_id
    }
  },
  methods: {
    modifyPersonInfoMation() {
      this.$router.push({
        name: 'self',
        params: {
          aid: this.aid
        },
      })
    },
    addAddress() {
      this.$router.push({
        path: '/person/address'
      })
    },
    modifyAddress(aid) {
      this.$router.push({
        name: 'address',
        params: {
          aid
        },
      })
    },
    deleteAddress(id, index) {
      this.$confirm('确认删除该地址?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$API.deleteDeliveryAddress(id).then(res => {
          if (res.status == 200) {
            this.$message.success('删除成功')
            this.list.splice(index, 1)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async load() {
      // 个人信息
      await this.$API.getPurchaser().then(res => {
        if (res.status == 200) {
          for (let obj of res.data) {
            if (obj.account_id == this.aid){
              this.info = obj
              if (obj.self_profile) this.imageUrl = obj.self_profile
              return this.$API.getOneLoginAccount(this.aid)
            }
          }
          Promise.reject()
        }
      }).then(res => {
        if (res.status && res.status == 200) {
          this.info = {...this.info, ...res.data}
        }
      }).catch(error => {
        this.$message.error('数据加载异常')
        console.log(error)
      })

      // 收货地址的数据
      let pid = '' //买家id
      await this.$API.getPurchaser().then(res => {
        if (res.status == 200) {
          let aid = this.$store.state.user.account_id
          for (let obj of res.data) {
            if (obj.account_id == aid) pid = obj.id
          }
         }
      })
      this.$API.getDeliveryAddress().then(res => {
        if (res.status == 200) {
          for (let obj of res.data) {
            if (pid == obj.purchaser_id) this.list.push(obj)
          }
        }
      })
    }
  },
  created() {
    this.load()
  }
};
</script>
<style lang="less" scoped>
.card{
  padding: 20px;
}
.main{
  .title{
    color: @color-theme;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .block{
    margin-bottom: 20px;
  }
  .image{
    img{
      width: 100px;
      height: 100px;
      border: @color-theme 1px solid;
    }
  }
  .content{
    .content-item{
      min-width: 200px;
    }
  }
}
</style>